<template>
  <div class="">
    <div class="input flex jcb pos t0">
      <input placeholder="账号手机号姓名" type="text"
             class="input-inner bsb"
             @blur="input = value" v-model="value">
      <span class="cancel" @click="$router.go(-1)">取消</span>
    </div>
    <div class="school-search bsb clearfix">
      <template v-if="activeRes && activeRes.length">
        <div class="res" v-for="(info, k) in activeRes" :key="k">
          <div class="item flex" v-for="(item, i) in active" :key="i">
            <div class="dib vat label wsnw">
              <span class="label-inner dib vat taj">{{item.label}}</span>:
            </div>
            <div class="value wspl">{{info | formatText(item)}}</div>
          </div>
        </div>
      </template>
      <div class="no-data tac" v-else-if="input">未找到相关结果</div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "SchoolSearch",
    computed: {
      ...mapGetters(['userInfo'])
    },
    filters: {
      formatText(data, item) {
        let prop = item.prop;
        switch (prop) {
          case 'vip':
            return data.vip_list.map(e => `${e.pack}\n${e.start_time.replace(/\-/g, '.').split(/\s+/)[0]}-${e.end_time.replace(/\-/g, '.').split(/\s+/)[0]}`).join('\n');
          case 'class':
            return data.nianji + data.class;
        }
        return data[prop];
      },
    },
    data() {
      return {
        tabs: ['搜索序列号', '搜索批次'],
        tab: 1,
        history: {},
        activeRes: [],
        active: [
          {label: '账号', prop: 'username'},
          {label: '姓名', prop: 'realname'},
          {label: '手机号', prop: 'phone'},
          {label: '会员卡', prop: 'vip'},
          {label: '注册方式', prop: 'register_type'},
          {label: '注册时间', prop: 'createtime'},
          {label: '上次登录', prop: 'last_time'},
          {label: '学校', prop: 'school'},
          {label: '班级', prop: 'class'},
        ],
        input: '',
        value: '',
      }
    },
    watch: {
      input(val) {
        if (!val) return;
        val = this.history[val];
        if (val) {
          this.activeRes = val;
        } else {
          this.getInfo();
        }
      },
    },
    created() {
    },
    methods: {
      tabChange(val) {
        this.tab = val;
      },
      getInfo() {
        if(!this.input) return;
        this.Http.searchStudent({
          proxy_id: this.userInfo.proxy_id,
          keyword: this.input,
        }).then(res => {
          this.history[this.input] = res.list;
          this.activeRes = res.list;
        }).catch(this.$err);
      },
    },
  }
</script>

<style scoped lang="less">
  .school-search {
    padding: 0 36px 30px;
    min-height: calc(100vh - 124px);
    background-color: #F7F8FA;
  }

  .input {
    align-items: center;
    padding: 30px 36px 0;
    background-color: #F7F8FA;
  }

  .input-inner {
    padding: 30px 40px;
    width: 590px;
    height: 84px;
    font-size: 32px;
    line-height: 1;
    border-radius: 44px;
    background: #F0F2F5;
  }

  .cancel {
    color: #999;
  }

  .tabs {
    margin: 60px 0 36px;
    .tab {
      padding: 0 5px 4px;
      font-size: 32px;
      color: #A7AAAB;
      font-weight: 500;
      background-position: bottom left;
      &:not(:last-child) {
        margin-right: 44px;
      }
      &.active {
        color: #222;
        font-weight: 900;
        background: linear-gradient(-90deg, rgb(103, 219, 255), rgb(54, 172, 255)) no-repeat bottom left / 100% 16px;
      }
    }
  }

  .res {
    margin-top: 40px;
    padding: 36px 36px 40px;
    background: #fff;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, .1);
    border-radius: 20px;
    color: #999;
    line-height: 2;
    font-size: 36px;
    font-weight: 500;
  }

  .label {
    margin-right: 52px;
    .label-inner {
      width: 144px;
    }
  }

  .value {
    color: #222;
  }

  .no-data {
    margin-top: 170px;
    font-weight: 500;
    font-size: 36px;
    color: #666;
  }
</style>